<section class="listSection">
  <div class="listNav">
    主页>字典管理>现场端监测因子
  </div>

  <section class="content selectContent">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>查询条件</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 listSectionSelect" >
        <form #localInfoList="ngForm" (ngSubmit)="listMessage(localInfoList.value)"  class="form-inline" >
          <div class="row">
            <div class="form-group search-list">
              <label>因子编码：</label>
              <input [(ngModel)]="localInfoCode" name="localInfoCode" type="text" class="form-control" placeholder="请输入因子编码">
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA search-btn" type="submit" >查询</button>
            </div>
          </div>
          <div class="row">
            <div class="form-group search-list">
              <label>因子名称：</label>
              <input [(ngModel)]="localInfoName" name="localInfoName" type="text" class="form-control" placeholder="请输入因子名称">
            </div>
            <div class="form-group search-list search-list-btn ">
              <button class="btn selectButtonOfA reset-btn" type="reset">清除</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>监测因子列表</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
        <form action="" >
          <div class="box-body">
            <div class="add-box clearfix">
              <button  class="btn add-tit" data-toggle="modal" data-target="#addModal"  (click)="add()">新增</button>
            </div>
            <table border="1" cellspacing="0"  class="table text-center listTable">
              <tr class="header-tab">
                <th>编码</th>
                <th>名称</th>
                <th>单位</th>
                <th>类型</th>
                <th>操作</th>
              </tr>
              <tr *ngFor="let localInfo of list">
                <!--<td><input type="radio" name="userId" id="{{localInfo.id}}"></td>-->
                <td>{{localInfo.localInfoCode}}</td>
                <td>{{localInfo.localInfoName}}</td>
                <td>{{localInfo.localInfoUnit }}</td>
                <td>{{localInfo.localInfoType}}</td>
                <td>
                  <span>
                     <img src="assets/icon/see.png" alt="查看">
                      <a href="#" data-toggle="modal" data-target="#myModal" (click)="userMessage(localInfo)">查看</a>
                  </span>
                  <span>
                     <img src="assets/icon/edit.png" alt="编辑">
                      <a href="#" data-toggle="modal" data-target="#updateModal" (click)="userMessage(localInfo)">编辑</a>
                  </span>
                  <span>
                     <img src="assets/icon/delete.png" alt="删除">
                      <a href="#" data-toggle="modal" data-target="#deleteModal" (click)="userMessage(localInfo)">删除</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <page [pageParams]="{pageSize:pageSize,totalNum:totalNum,curPage:curPage,totalPage:totalPage}" (changeCurPage)="getPageData($event)"></page>
        </form>
      </div>
    </div>
  </section>

  <!-- userMessage -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">监测因子详情</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td>编码：</td>
                  <td>{{queryMessage.localInfoCode}}</td>
                </tr>
                <tr>
                  <td>名称：</td>
                  <td>{{queryMessage.localInfoName}}</td>
                </tr>
                <tr>
                  <td>单位：</td>
                  <td>{{queryMessage.localInfoUnit}}</td>
                </tr>
                <tr>
                  <td>类型：</td>
                  <td>{{queryMessage.localInfoType}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="form-group search-list-btn">
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- add -->
  <form #addAirPollutant="ngForm" (ngSubmit)="addMessage(addAirPollutant.value,addAirPollutant.valid)">
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="addModalLabel">新增监测因子</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td><span class="red">*</span>编码：</td>
                  <td><input [(ngModel)]="addMessages.localInfoCode" type="text" class="form-control" name="localInfoCode" required ></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>名称：</td>
                  <td><input [(ngModel)]="addMessages.localInfoName" type="text" class="form-control" name="localInfoName" required ></td>
                </tr>
                <tr>
                  <td>描述：</td>
                  <td><input [(ngModel)]="addMessages.localInfoUnit" type="text" class="form-control" name="localInfoUnit"></td>
                </tr>
                <tr>
                  <td>类型：</td>
                  <td><input [(ngModel)]="addMessages.localInfoType" type="text" class="form-control" name="localInfoType"></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn sumbit-btn" type="submit" [disabled]="!addAirPollutant.form.valid">提交</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- update -->
  <form #airPollutant="ngForm" (ngSubmit)="updateMessage(airPollutant.value,airPollutant.valid)">
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="updateModalLabel">编辑监测因子</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <input type="text" [(ngModel)]="updateMessages.id" class="form-control hidden" name="id" value="{{updateMessages.id}}" >
                <tr>
                  <td><span class="red">*</span>现场端因子编码：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.localInfoCode" class="form-control" name="localInfoCode" value="{{updateMessages.localInfoCode}}" required></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>现场端因子名称：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.localInfoName" class="form-control" name="localInfoName" value="{{updateMessages.localInfoName}}" required></td>
                </tr>
                <tr>
                  <td>现场端因子单位：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.localInfoUnit" class="form-control" name="localInfoUnit" value="{{updateMessages.localInfoUnit}}"></td>
                </tr>
                <tr>
                  <td>现场端因子类型：</td>
                  <td><input type="text" [(ngModel)]="updateMessages.localInfoType" class="form-control" name="localInfoType" value="{{updateMessages.localInfoType}}"></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button  class="btn sumbit-btn" type="submit"[disabled]="!airPollutant.form.valid">提交</button>
          <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
        </div>
      </div>
    </div>
  </div>
  </form>

  <!-- delete -->
  <div class="modal fade deleteModal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="deleteModalLabel">删除监测因子</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>是否删除该监测因子？</span>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn" data-name="{{queryMessage.id}}"  (click)="deleteById($event)">确定</button>
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade deleteModal" id="error" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="errorMessage">错误信息</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>{{errorMessage}}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer2 text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn"  data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>


